<template>
  <div>
    <div class="ca" @mouseover="handelOver" @mouseleave="handelLave" @click="handelClick">
      我的日历
      <a-icon type="down" :rotate="rotate" />
    </div>
    <div class="ca" @mouseover="handelOver" @mouseleave="handelLave" v-show="show">
      <template>
        <a-radio value="0" @change="onChange">我的日历</a-radio>
      </template>
    </div>
    <div class="ca" @mouseover="handelOver" @mouseleave="handelLave" v-show="show">
      <template>
        <a-radio checked value="1" @change="onChange">我的待办</a-radio>
      </template>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      value: false,
      show: true,
      rotate: 0
    }
  },
  methods: {
    handelClick () {
      this.show = !this.show
      this.rotate = this.rotate + 180
    },
    handelOver (e) {
      e.target.style.background = '#f1fef1fe'
    },
    handelLave (e) {
      e.target.style.background = '#fff'
    },
    onChange () {
    }
  }
}
</script>

<style lang="scss" scoped>
.ca {
  width: 300px;
  height: 40px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
